<template>
  <div>
    <a-card :loading="cardLoading" :bordered="false" style="height: 100%; margin-bottom: 20px">
      <div style="display:flex;justify-content: space-around">
        族库管理平台 <a-input style="width: 465px" placeholder="输入构件名称查询" />
        <a-button type="text" @click="jump">后台管理</a-button>
      </div>
    </a-card>
    <a-row type="flex" :gutter="16">
      <a-col :md="2" :sm="24">
        <a-card :loading="cardLoading" :bordered="false" style="height: 100%">
          <a-spin :spinning="loading"> </a-spin>
        </a-card>
      </a-col>
      <a-col :md="24 - 2" :sm="24">
        <a-card class="j-address-list-right-card-box" :loading="false" :bordered="false">
          <a-form layout="inline">
            <a-row :gutter="10">
              <a-col :md="10" :sm="10">
                <a-form-item label="通用">
                  <a-form-item label="国际构建" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
                  <a-form-item label="品牌构建" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
                  <a-form-item label="带图例构建" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
                  <a-form-item label="参数化构建" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>

                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="10" :sm="10">
                <a-form-item label="品牌">
                  <a-form-item label="全部" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
                  <a-form-item label="设计院" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
                  <a-form-item label="施工单位" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
                  <a-form-item label="建设单位" style="margin-left: 8px">
                    <a-checkbox v-decorator="['parameter']"></a-checkbox>
                  </a-form-item>
            <!-- <a-tabs v-model:activeKey="activeKey"  :tab-position="mode"
              :style="{ height: '200px' }"       @tabScroll="callback"    >
              <a-tab-pane v-for="i in brandList" :key="i" :tab="`i.brandName`">Content of tab {{ i }}</a-tab-pane>
            </a-tabs> -->

    </a-form-item>
    </a-col>

            </a-row>
            <a-row :gutter="10">
              <a-col :md="10" :sm="10">
                <a-form-item label="标签">
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :md="10" :sm="10">
                <a-form-item label="录入时间">
                  <a-range-picker></a-range-picker>
                </a-form-item>
              </a-col>
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :md="3" :sm="24">
                  <a-button type="primary" icon="reload" style="margin-left: 8px">重置</a-button>
                </a-col>
              </span>
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-col :md="3" :sm="24">
                  <a-button  style="margin-left: 8px">确定</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
          <div class="table-page-search-wrapper">
            <div class="list">
              <div class="list-content-item" :key="index" v-for="(item, index) in dataList1">
                <div class="item">
                  <img
                    src="https://static.goujianwu.com/metadata/1075396212612672/thumbnails/256_0.png?v=v10"
                    class="img"
                  />
                  <div style="font-size: 16px; line-height: 24px; word-break: break-all; color: #787a82">
                    {{ item.name }}
                  </div>
                  <div style="display: flex; justify-content: space-between; margin: 0 10px">
                    <span style="display: inline-block; color: #1a90ff">参数</span>
                    <span style="font-size: 14px; color: #a0a2aa"> 适用平台:revit</span>
                  </div>
                </div>
              </div>
            </div>
            <div style="margin-top: 20px">
              <a-pagination
                @change="onChange"
                :total="total"
                :current="current"
                :pageSize="pageSize"
                :showQuickJumper="true"
                :showTotal="(total, range) => `${range[0]} - ${range[1]} 共 ${total} 条`"
              />
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { getAction, deleteAction, postAction } from '@/api/manage'
  import { ajaxGetDictItems } from '@/api/api'
  export default {
    component: {},
    data() {
      return {
        description: '族库分类',
        currentOrgCode: '',
        cardLoading: false,
        loading: false,
        expandedKeys: [],
        selectedKeys: [],
        treeDataSource: [],
        replaceFields: {
          title: 'typename',
          children: 'familyTypeTreeChildList'
        },
        dataList1: [
          {
            id: 1205658098572864,
            name: '建筑圆柱.rfa',
            categoryId: 1241,
            categoryNames: ['建筑', '建筑柱', '造型柱'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 5,
            isRegistered: null,
            keywords: ['柱'],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2017-07-31T19:16:48.000+0000',
            thumbnail: 'metadata/1083180236815936/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: false,
            fileSize: 339968
          },
          {
            id: 1615442640984256,
            name: '建筑标记.rfa',
            categoryId: 1239,
            categoryNames: ['建筑', '注释符号'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 0,
            isRegistered: null,
            keywords: [],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2019-05-27T10:02:10.000+0000',
            thumbnail: 'metadata/1615441164384448/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: false,
            fileSize: 212992
          },
          {
            id: 1115649367547729,
            name: '建筑柱.rfa',
            categoryId: 1241,
            categoryNames: ['建筑', '建筑柱', '造型柱'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 8,
            isRegistered: null,
            keywords: ['柱'],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2017-06-20T06:50:09.000+0000',
            thumbnail: 'metadata/1115649357971008/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: false,
            fileSize: 331776
          },
          {
            id: 1084117774828052,
            name: '建筑大门.rfa',
            categoryId: 1269,
            categoryNames: ['建筑', '门', '建筑大门'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 5,
            isRegistered: null,
            keywords: ['门', '大门'],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2017-11-29T02:30:10.000+0000',
            thumbnail: 'metadata/1500456378300160/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: true,
            fileSize: 638976
          },
          {
            id: 1083180628730218,
            name: '建筑圆柱1.rfa',
            categoryId: 1241,
            categoryNames: ['建筑', '建筑柱', '造型柱'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 7,
            isRegistered: null,
            keywords: ['柱'],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2017-05-05T09:52:16.000+0000',
            thumbnail: 'metadata/1083180249660992/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: false,
            fileSize: 458752
          },
          {
            id: 1327970399737600,
            name: '建筑大门.rfa',
            categoryId: 1269,
            categoryNames: ['建筑', '门', '建筑大门'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 8,
            isRegistered: null,
            keywords: ['门', '大门'],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2018-04-16T06:18:24.000+0000',
            thumbnail: 'metadata/1327970208388864/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: false,
            fileSize: 1339392
          },
          {
            id: 1615442699376832,
            name: '建筑红线标记.rfa',
            categoryId: 1239,
            categoryNames: ['建筑', '注释符号'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 2,
            isRegistered: null,
            keywords: [],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2019-05-27T10:02:17.000+0000',
            thumbnail: 'metadata/1615441104656576/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: false,
            fileSize: 212992
          },
          {
            id: 1357834352146176,
            name: '古建筑窗.rfa',
            categoryId: 1265,
            categoryNames: ['建筑', '窗', '其他窗'],
            shopId: 1587726051565792,
            shopName: null,
            platforms: ['revit'],
            parametricSize: 4,
            isRegistered: null,
            keywords: ['窗'],
            logoUrl: null,
            brandName: null,
            brandCode: null,
            downloadCount: null,
            favoriteCount: null,
            pageView: null,
            createTime: '2018-05-28T10:56:46.000+0000',
            thumbnail: 'metadata/1645081608583360/thumbnails/256_0.png?v=v10',
            isFavourite: false,
            hasBuiltinPlaceholder: true,
            fileSize: 700416
          }
        ],
        total: 19,
        current: 0,
        pageSize: 9,
        style: {},
        defaultButton: false,
        url: {
          list: '/tree/list',
          query: '/familycomponentcicdi/familyComponent/list'
        },
        reviteList: [],
        parameterizationList: [],
        legendCode: [],
        treeInfo: {}
      }
    },
    created() {
      this.init()
    },
    methods: {
      jump(){
        this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
        console.log('登录跳转首页出错,这个错误从哪里来的')
      })
      },
      init() {
        // getAction(this.url.list).then(res => {
        //   console.log('res', res)
        //   if (res.code === 0) {
        //     this.treeDataSource = res.result
        //   }
        // })
        ajaxGetDictItems('revit_version_type', null).then(res => {
          if (res.success) {
            console.log(res)
            this.reviteList = res.result
          }
        })
        ajaxGetDictItems('parameterization_code', null).then(res => {
          if (res.success) {
            console.log(res)
            this.parameterizationList = res.result
          }
        })
        ajaxGetDictItems('legend_code', null).then(res => {
          if (res.success) {
            console.log(res)
            this.legendCode = res.result
          }
        })
      },
      onChange() {},
      handleSearch() {},
      handleTreeSelect() {},
      dataList() {},
      onMouseoverEnvDelBtn(event) {
        console.log('event', event)
        // event.target.querySelector('.item').style.cssText += 'display:block'
      },
      removeStyle() {
        this.defaultButton = false
      },
      onhandlerserach() {
        getAction(this.url.query).then(res => {
          if (res.code === 200) {
            console.log('res', res)
          }
        })
      },
      onselectTree(e) {
        this.recursiveFilter(this.treeDataSource, e[0])
        console.log(this.treeInfo, '======treeInfo')
      },
      // 通过key 获取树节点信息
      recursiveFilter(tree, keys) {
        console.log('------', tree, 'keys', keys)
        // let data = tree.filter((item) => item.key == keys)
        // if (data.length != 0) {
        //   this.treeInfo = data[0]
        // } else {
        //   tree.map((item) => {
        //     if (item.familyTypeTreeChildList) {
        //       //递归循环
        //       this.recursiveFilter(item.familyTypeTreeChildList, keys)
        //     }
        //   })
        // }
        // return data
      }
    }
  }
</script>

<style lang="less" scoped>
  .list {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    .list-content-item {
      width: 224px;
      height: 280px;
      box-sizing: border-box;
      padding: 10px 20px 10px 10px;
      transition: all 0.3s;
      .item {
        width: 100%;
        height: 100%;
        box-shadow: 0 0 6px 0 rgba(136, 146, 160, 0.5);
        text-align: center;
        .img {
          display: inline-block;
          width: 180px;
          height: 200px;
        }
        // .img :hover {
        //   transform: scale(1.2);
        // }
      }
    }
    .list-content-item :hover {
      // background: #f30;
      // box-shadow: 0 0 6px 0 rgba(28, 89, 174, 0.8);
      // transform: scale(1.01);
    }
  }
</style>

